<template>
    <div class="orderListRuleForm">
        <panle title='继承记录' content="继承记录"></panle>
        <!--搜索-->
        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
            <el-form-item label="继承时间" prop="date">
                <el-date-picker
                    v-model="form.date"
                    type="daterange"
                    align="right"
                    size="mini"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="员工手机号:" prop="phone">
                <el-input size="mini" placeholder="请输入" v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="员工名称:" prop="popu_name">
                <el-input size="mini" placeholder="请输入" v-model="form.popu_name"></el-input>
            </el-form-item>
            <el-form-item label="推荐人名称:" prop="invite_user_name">
                <el-input size="mini" placeholder="请输入" v-model="form.invite_user_name"></el-input>
            </el-form-item>
            <el-form-item label="继承人名称:" prop="inherit_user_name">
                <el-input size="mini" placeholder="请输入" v-model="form.inherit_user_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
                <el-button @click="resetForm('form')" size="mini">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
            </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="离职列表" name="resign">
                <div class="table-wrap">
                    <el-table :data="tableResignData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                              stripe default-expand-all>
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="resign_popu_name" label="离职员工"></el-table-column>
                        <el-table-column prop="resign_phone" label="手机号"></el-table-column>
                        <el-table-column prop="invite_popu_name" label="上一级"></el-table-column>
                        <el-table-column prop="resign_popu_level" label="员工推广员级别">
                            <template slot-scope="scope">
                                <span v-if="scope.row.resign_popu_level == 1">一级</span>
                                <span v-else-if="scope.row.resign_popu_level == 2">二级</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="next_popu_num" label="发展下级推广员数"></el-table-column>
                        <el-table-column prop="next_customer_num" label="直接客户数"></el-table-column>
                        <el-table-column prop="inherit_popu_name" label="继承员工"></el-table-column>
                        <el-table-column prop="inherit_time" label="继承时间"></el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                                       :page-size="form.pageSize"
                                       background layout="total, sizes, prev, pager, next, jumper"
                                       :total="form.total"></el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="继承列表" name="inherit">
                <div class="table-wrap">
                    <el-table :data="tableInheritData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                              stripe default-expand-all>
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="jicheng_popu_name" label="继承员工"></el-table-column>
                        <el-table-column prop="jicheng_popu_level" label="继承员工级别">
                            <template slot-scope="scope">
                                <span v-if="scope.row.jicheng_popu_level == 1">一级</span>
                                <span v-else-if="scope.row.jicheng_popu_level == 2">二级</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="jicheng_phone" label="手机号"></el-table-column>
                        <el-table-column prop="jicheng_inherit_time" label="继承时间"></el-table-column>
                        <el-table-column prop="next_popu_num" label="继承推广员数"></el-table-column>
                        <el-table-column prop="next_customer_num" label="继承客户数"></el-table-column>
                        <el-table-column prop="lizhi_popu_name" label="离职员工"></el-table-column>
                        <el-table-column prop="shangyiji_popu_name" label="离职员工上级"></el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                                       :page-size="form.pageSize"
                                       background layout="total, sizes, prev, pager, next, jumper"
                                       :total="form.total"></el-pagination>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import {
    getInheritList,
    getResignList,
    getUserPayRecord
} from "@/api/sell/examineRecord/examineRecord";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';

export default {
    name:'Examine-Pay-Record',
    components: {
        Panle,
        PersButton,
    },
    data() {
        return {
            loading:false,
            tableResignData: [],
            tableInheritData:[],
            activeName: 'resign',
            form: {
                date:[],
                phone:'',
                popu_name:'',
                invite_user_name:'',
                inherit_user_name:'',
                pageSize: 10,
                pageNumber: 1,
                total: 0,

            },
        }
    },
    created() {
        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
            if(this.activeName == 'resign'){
                getResignList(this.form).then((res) => {
                    this.tableResignData = res.data.data;
                    this.form.total = res.data.total;
                    this.loading = false;
                })
            }else{
                getInheritList(this.form).then((res) => {
                    this.tableInheritData = res.data.data;
                    this.form.total = res.data.total;
                    this.loading = false;
                })
            }
        },

        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.form.date = [];
            this.form.phone = '';
            this.form.popu_name = '';
            this.form.invite_user_name = '';
            this.form.inherit_user_name = '';
            this.init();
        },
        handleClick(tab, event) {
            this.init();
        }
    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}


</style>